<template>
	<div>
		<div style="display: flex;justify-content: space-between">
			<div>
				<el-input
								v-model="keywords"
								placeholder="请输入学生名进行模糊查询..."
								prefix-icon="el-icon-search"
								@keydown.enter.native="initStus"
								@input="initStus"
								style="width: 300px;margin-right: 8px"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="initStus">搜索</el-button>
				<el-button type="primary">
					<i class="fa fa-angle-double-down" aria-hidden="true"></i>
					高级搜索
				</el-button>
			</div>
			<div>
				<el-button type="success">
					<i class="fa fa-level-up" aria-hidden="true"></i>
					导入数据
				</el-button>
				<el-button type="success">
					<i class="fa fa-level-down" aria-hidden="true"></i>
					导出数据
				</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">
					添加用户
				</el-button>
			</div>
		</div>
		<div style="margin-top: 10px">
			<el-table
							v-loading="loading"
							:data="stus"
							border
							stripe
							style="width: 100%">
				<el-table-column
								type="selection"
								width="55">
				</el-table-column>
				<el-table-column
								prop="stuId"
								label="学号"
								align="left"
								fixed
								width="85">
				</el-table-column>
				<el-table-column
								prop="name"
								label="姓名"
								fixed
								align="left"
								width="100">
				</el-table-column>
				<el-table-column
								prop="gender"
								label="性别"
								align="left"
								fixed
								width="50">
				</el-table-column>
				<el-table-column
								prop="major"
								label="专业"
								align="left"
								width="150">
				</el-table-column>
				<el-table-column
								prop="grade"
								label="年级"
								align="left"
								width="150">
				</el-table-column>
				<el-table-column
								prop="email"
								label="电子邮件"
								align="left"
								width="200">
				</el-table-column>
				<el-table-column
								prop="phone"
								label="电话号码"
								align="left"
								width="120">
				</el-table-column>
				<el-table-column
								prop="address"
								label="联系地址"
								align="left"
								width="150">
				</el-table-column>


				<el-table-column label="操作" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
						<el-button @click="deleteStu(scope.row)" style="padding: 3px" size="mini" type="danger">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex;justify-content: flex-end">
				<el-pagination
								@current-change="currentChange"
								@size-change="sizeChange"
								background
								layout="sizes, prev, pager, next, jumper, ->, total, slot"
								:total="total">
				</el-pagination>
			</div>
		</div>
		<el-dialog
						:title="dialogTitle"
						:visible.sync="dialogVisible"
						width="80%">
			<div>
				<el-form :model="stu" :rules="rules" ref="stuForm">
					<el-row>
						<el-col :span="5">
							<el-form-item label="学号:" prop="stuId">
								<el-input style="width: 150px" prefix-icon="el-icon-edit" v-model="stu.stuId"
								          placeholder="请输入学生学号"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="姓名:" prop="name">
								<el-input style="width: 150px" prefix-icon="el-icon-edit" v-model="stu.name"
								          placeholder="请输入学生姓名"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="性别:" prop="gender">
								<el-radio-group v-model="stu.gender">
									<el-radio label="男">男</el-radio>
									<el-radio label="女">女</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="专业:" prop="major">
								<el-input style="width: 150px" prefix-icon="el-icon-edit" v-model="stu.major"
								          placeholder="请输入学生专业"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="5">
							<el-form-item label="年级:" prop="grade">
								<el-input style="width: 150px" prefix-icon="el-icon-edit" v-model="stu.grade"
								          placeholder="请输入学生年级"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="电子邮箱:" prop="email">
								<el-input style="width: 150px" prefix-icon="el-icon-message"
								          v-model="stu.email" placeholder="请输入电子邮箱"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="联系地址:" prop="address">
								<el-input style="width: 150px" prefix-icon="el-icon-edit"
								          v-model="stu.address" placeholder="请输入联系地址"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="电话号码:" prop="phone">
								<el-input style="width: 150px" prefix-icon="el-icon-phone"
								          v-model="stu.phone" placeholder="电话号码"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="doAddOrEditEmp">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {deleteRequest, getRequest, postRequest, putRequest} from "@/utils/api";

export default {
	name: "StuBasic",
	data() {
		return {
			dialogTitle: '添加学生',
			defaultProps: {
				children: "children",
				label: "name"
			},
			popVisible: false,
			dialogVisible: false,
			dialogVisibleForAdv: false,
			keywords: '',
			loading: false,
			stus: [],
			total: 0,
			page: 1,
			size: 10,
			stu: {
				stuId: "",
				name: "",
				major: "",
				grade: "",
				email: "",
				phone: "",
				address: "",
				gender: ""
			},
			rules: {
				stuId: [{required: true, message: '请输入学生学号', trigger: 'blur'}],
				name: [{required: true, message: '请输入学生姓名', trigger: 'blur'}],
				gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
				email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'}, {
					type: 'email',
					message: '邮箱格式不正确',
					trigger: 'blur'
				}],
				phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}, {
					validator: function (rule, value, callback) {
						if (/^1[34578]\d{9}$/.test(value) == false) {
							callback(new Error("手机号格式错误"));
						} else {
							callback();
						}
					},
					trigger: "blur"
				}],
				address: [{required: true, message: '请输入学生地址', trigger: 'blur'}],
				major: [{required: true, message: '请输入专业', trigger: 'blur'}],
				grade: [{required: true, message: '请输入年级', trigger: 'blur'}],
			},

		}
	},
	mounted() {
		this.initStus();
	},
	methods: {
		emptyStu() {
			this.stu = {
				stuId: "",
				name: "",
				major: "",
				grade: "",
				email: "",
				phone: "",
				address: "",
				gender: ""
			}
		},
		showAddEmpView() {
			this.emptyStu();
			this.dialogTitle = '添加员工'
			this.dialogVisible = true
		},
		showEditEmpView(data) {
			this.dialogTitle = '编辑学生信息';
			this.stu = data;
			this.dialogVisible = true;

		},
		doAddOrEditEmp() {
			//如果有id则为修改否则为新增
			if (this.stu.id) {
				this.$refs.stuForm.validate(valid => {
					if (valid) {
						putRequest("/student/basic/", this.stu).then(resp => {
							if (resp) {
								this.dialogVisible = false;
								this.emptyStu();
								this.initStus();
							}
						})
					}
				})
			} else {
				this.$refs.stuForm.validate(valid => {
					if (valid) {
						postRequest("/student/basic/", this.stu).then(resp => {
							if (resp) {
								this.dialogVisible = false;
								this.initStus();
							}
						})
					}
				})
			}
		},
		initPositions() {
			getRequest("/employee/basic/positions").then(resp => {
				if (resp) {
					this.positions = resp;
				}
			})
		},
		sizeChange(size) {
			this.size = size;
			this.initStus();
		},
		currentChange(currentPage) {
			this.page = currentPage;
			this.initStus();
		},
		initStus() {
			this.loading = true;
			getRequest("/student/basic/?page=" + this.page + "&size=" + this.size + "&keywords=" + this.keywords).then(resp => {
				this.loading = false;
				if (resp) {
					this.stus = resp.data;
					this.total = resp.total;
				}
			})
		},
		deleteStu(data) {
			this.$confirm('此操作将永久删除[' + data.name + ']学生, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteRequest("/student/basic/" + data.id).then(resp => {
					if (resp) {
						this.initStus()
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
	}
}
</script>

<style scoped>

</style>
